<template>
  <div class="split-title flex flex-middle flex-between">
    <div class="flex flex-middle">
      <img class="split-icon-prev" :src="icon" />
      <span class="split-title-text">{{ text }} <slot /></span>
      <span v-if="showExtra" class="extra">
        <slot name="extra">
          <img :src="more" alt="icon" style="cursor: pointer" @click="$emit('more', $event)" />
        </slot>
      </span>
      <img class="split-icon-next" :src="icon" style="transform: rotate(180deg)" />
    </div>
    <slot name="rightExtra"></slot>
  </div>
</template>

<script>
import icon from './assets/tit_ic_san.png';
import more from './assets/nor_bt_morepop.png';
export default {
  name: 'split-title',
  props: {
    text: { type: String },
    icon: { type: [String, Boolean], default: () => icon },
    more: { type: [String, Boolean], default: () => more },
  },
  computed: {
    showExtra() {
      return (this.icon && this.$attrs.onMore) || this.$slots.extra;
    },
  },
};
</script>

<style scoped lang="less">
.split-title {
  .extra {
    margin: 0 0 0 6px;
  }
  &-text {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
  }
  .split-icon-prev {
    margin-right: 16px;
  }
  .split-icon-next {
    margin-left: 16px;
  }
}
</style>
